//数据
let lists = ["学习 JavaScript", "学习 CSS3", "学习 HTML5"];
/*
要追加的内容
<li class="list-group-item d-flex justify-content-between align-items-center">
    <span>学习 JavaScript</span>
	<button type="button" class="close">&times;</button>
</li>
 */
function d() {

	document.querySelector("#ul").innerHTML = ""
	for (let i = 0; i < lists.length; i++) {
		let li = document.createElement('li')
		li.className = "list-group-item d-flex justify-content-between align-items-center"

		let span = document.createElement("span")
		let spanText = document.createTextNode(lists[i])
		span.appendChild(spanText)
		
		//先把span设置为不可编辑状态
		span.setAttribute('contenteditable',false)
		
		//给span加双击事件
		span.addEventListener('dblclick',function(){
			//span设置为可编辑状态
			span.setAttribute('contenteditable',true)
		})
		//span加失去焦点事件
		span.addEventListener('blur',function(){
			//span设置为不可编辑状态
			span.setAttribute("contenteditable",false)
		})
		
		
		li.appendChild(span)

		let button = document.createElement("button")
		button.type = "button"
		button.classList.add("close")
		button.innerHTML = "&times;"
		
		//给button加事件
		button.addEventListener('click',function(){
			console.log(i)
			lists.splice(i,1)
			//点击后，再重新渲染一遍DOW
			d()
		})
		
		
		li.appendChild(button)

		
		let ul = document.querySelector("#ul")
		ul.appendChild(li)
	}
}
d()

let btn = document.querySelector("#btn")
btn.addEventListener('click', function() {
	let text = document.querySelector("#ipt")

	if (text.value != '') {
		lists.unshift(text.value)
		//追加完毕内容之后，把input的内容清空
		text.value = ""
	} else {
		alert("不可以为空。")
	}
	//执行for循环
	d()
})
